<template>

  <el-row type="flex">
    <el-input v-model="captcha.code_val" autocomplete="off" placeholder="短信验证码"
              v-on:change="$emit('change',captcha.code_id,captcha.code_val)">
      <template slot="append">
        <el-button @click="openSendDialog()" v-text="sendButton.content||'发送验证码'"
                   :disabled="sendButton.disabled||false"></el-button>
      </template>
    </el-input>

    <el-dialog
        title="发送手机验证码"
        :visible.sync="captchaImgDialogVisible"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        append-to-body
        center>
      <div>
        <el-form :model="sendFormData">
          <el-form-item label="发送到" :label-width="formLabelWidth">
            <el-input :value="sendTo" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="图片验证码" :label-width="formLabelWidth">
            <input-captcha-image v-on:change="captchaImageChange"></input-captcha-image>
          </el-form-item>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="captchaImgDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="send()">发 送</el-button>

      </div>
    </el-dialog>
  </el-row>

</template>

<script>
//import inputCaptchaImage from './inputCaptchaImageComponent'
export default {
  components: {
    //inputCaptchaImage
  },
  props: {
    sendTo: {
      type: String,
      default: ''
    },
    tpl: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      formLabelWidth: '30%',
      captchaImgDialogVisible: false,
      captcha: {
        code_val: '',
        code_id: ''
      },
      sendButton: {
        content: '发送验证码',
        disabled: false
      },
      sendFormData: {
        tpl: '',
        code_img_id: '',
        code_img_val: '',
      }

    }
  },
  created() {
    //console.log(this);
    this.sendFormData.tpl = this.tpl;
  },
  mounted() {
    let _this = this;
  },
  methods: {
    captchaImageChange: function (code_id, code_val) {
      this.sendFormData.code_img_id = code_id;
      this.sendFormData.code_img_val = code_val;
    },
    openSendDialog: function () {
      let _this = this;
      LeValidator.validateMobile(null, _this.sendTo, function (error) {
        if (error) {
          _this.$message.error(error.message || '错误')
          return;
        }
        _this.captchaImgDialogVisible = true;
      })

    },
    send: function (event) {

      if (event) {
        event.preventDefault()
      }

      let _this = this
      LeValidator.validateMobile(null, _this.sendTo, function (error) {
        if (error) {
          _this.$message.error(error.message || '错误')
          return;
        }
        _this.sendFormData.mobile = _this.sendTo;
        LeRoute.request('api.l-e-s.captcha.mobile', _this.sendFormData).then(function (res) {

          var _status = res.status || false;
          if (_status) {
            _this.captcha.code_id = res.data.code_id || '';
            _this.captchaImgDialogVisible = false;
            _this.$message.success('发送成功');

            _this.sendButton.disabled = true;
            _this.sendButton.content = '';
            LeUtils.timeCountDown(60, function () {
              _this.sendButton.disabled = false;
              _this.sendButton.content = '发送验证码';
            }, function (timeout) {
              _this.sendButton.content = timeout + '秒后重新发送';
            })
            return true;
          }

          return false;
        });
      })

    }
  }
}
</script>
